<html>
    <head>
        <title>具名插槽</title>
    </head>
    <body>
        <script>
            // 具名插槽
                    // 有时候我们需要"多个插槽"，例如对于一个带有如下模板的<base-layout>组件：
                                /*
                                    <div class="container">
                                        <header>
                                            --我们希望把页头放在这里--
                                        </header>
                                        <main>
                                            --我们希望把主要内容放在这里---
                                        </main>
                                        <footer>
                                            --我们希望把页脚放在这里---
                                        </footer>
                                    </div>
                                */
                    // 对于这样的情况，<slot>元素有一个特殊的 attribute(属性)："name". 这个 attribute可以用来"定义额外的插槽"：
                                /*
                                    (声明具名插槽)
                                    组件模板中具名插槽的声明方式：

                                    <div class="container">
                                        <header>
                                            <slot name="header">
                                                   这是具名插槽的默认内容
                                            </slot>
                                        </header>
                                        <main>
                                             <slot>
                                                    这是默认插槽的默认内容
                                             </slot>
                                        </main>
                                        <footer>
                                            <slot name="footer">
                                                    这是具名插槽的默认内容    
                                            </slot>
                                        </footer>
                                    </div>
                                */ 
                    /*
                        一个不带name的 <slot>出口会带有"隐含的名字"----"default"。

                        在向具名插槽提供内容的时候，我们可以在一个<template>元素上使用 "v-slot" 指令，并以 v-slot 的参数的形式提供其名称 :
                    */

                                /*
                                    (使用具名插槽)
                                    具名插槽的使用方式：

                                    <base-layout>
                                        <template v-slot:header>
                                            <h1>Here might be a page title</h1>
                                        </template>

                                        <p>A paragraph for the main  content</p>
                                        <p>And another one</p>

                                        <template v-slot:footer>
                                            <p> Here's some contact info</p>
                                        </template>
                                    </base-layout>
                                */
                    /*
                        现在 <template> 元素中的所有内容都讲会被传入相应的插槽。
                        任何没有被包裹在带有v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

                        然而，如果你想更明确一些，仍然可以在一个<template>中包裹默认插槽的内容：
                    */
                    
                                /*

                                    然而，如果你想更明确一些，仍然可以在一个<template>中包裹默认插槽的内容：

                                    <base-layout>   
                                        <template v-slot:header>  使用具名插槽，必须用template标签，包裹，并且使用v-slot指令
                                            <h1>here might be a page title</h1>
                                        </template>

                                        <template v-slot:default>
                                            <p>A paragraph for the main content</p>
                                            <p> And another one</p>
                                        </template>

                                        <template v-slot:footer>
                                            <p>Here's some contact info</p>
                                        </template>
                                    </base-layout>
                                */
                    /*
                        注意：
                            v-slot 只能添加在 <template> 上(只有一种例外情况)，这一点和废弃的 slot 属性不同。
                    */
                    
                     
                        

        </script>
    </body>
</html>